import ajax from "../../util/request";
import { useState, useEffect } from "react";

// 函数组件：注意大驼峰命名规则
function UseEffect(props) {

    let [list, setList] = useState([]);

    // 传入非空数组，数组中的数据发生变化，会触发函数执行
    useEffect(() => {
        console.log("我数据发生了变化:", props.t_cat_plant_fk)
        ajax("/content/queryList", { t_cat_plant_fk: props.t_cat_plant_fk, rows: 10 }).then(res => {
            if (res.data.status > 0) {
                setList(res.data.result_data);
            }
        })
    }, [props.t_cat_plant_fk])

    // 传入空数组，只在组件挂在时执行一次，可以替代componentDidMount生命周期函数
    // 如果页面不需要外部传入参数就去加载数据，那么可以使用此方案加载数据
    useEffect(() => {
        console.log("我执行了！！")
    },[])

    return (
        <ol>
            {list.map(v => <li key={v.t_content_pk}>{v.title}</li>)}
        </ol>
    )
}

// 记得export default
export default UseEffect;